import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { PaymentSchedulePage } from './payment-schedule/payment-schedule.page';
import { Router, NavigationExtras } from '@angular/router';
import { CommonPaymentPasswordPage } from '@common-components/common-payment-password/common-payment-password.page';
import { AuthTokenService } from '@services/auth-token.service';
import { HttpClient } from "@angular/common/http";
import { CommonNoPaymentPwdPage } from '@common-components/common-no-payment-pwd/common-no-payment-pwd.page';

@Component({
  selector: 'app-installment',
  templateUrl: './installment.page.html',
  styleUrls: ['./installment.page.scss'],
})
export class InstallmentPage implements OnInit {

  consentAgreement:boolean = true;
  constructor(
    public modalController: ModalController,
    private router: Router,
    private authTokenService:AuthTokenService,
    private http: HttpClient
  ) { }

  ngOnInit() {
  }

  changeConsentAgreement(){
    this.consentAgreement = !this.consentAgreement;
  }

  currentModal:any = null;
  appUserId = this.authTokenService.getAppUserId();
  toPaymentSchedule(evt){
    this.openPaymentSchedule();
  }

  async openPaymentSchedule(){
    const modal = await this.modalController.create({
      component: PaymentSchedulePage,
      cssClass: 'my-custom-class',
      componentProps: {
        'firstName': 'Douglas',
        'lastName': 'Adams',
        'middleInitial': 'N'
      }
    });
    await modal.present();
    this.currentModal=modal;
  }

  toAprCalc(event){
    this.router.navigate(['/tabs/myAccount/installment/apr-calculate']);
  }

  toSuccessfully(evt){
    this.router.navigate(['/tabs/myAccount/installment/successfully']);
  }

  selected = false;
  selectedOptions(evt){
    if(evt.detail.value != 'bill'){
      this. selected = true;
    }else{
      this. selected = false;
    }
  }

  paymentOrders = [
    {
      id:"1",
      name:"Merchant Name",
      date:"05/25 13:00",
      amt:336,
      selected:false
    },
    {
      id:"2",
      name:"Merchant Name",
      date:"05/24 12:30",
      amt:364,
      selected:false
    },
    {
      id:"3",
      name:"Merchant Name",
      date:"05/23 14:50",
      amt:301,
      selected:false
    }
  ];

  selectedAmt = [];
  totalAmt:number = 0;
  openRadio(item){
    if(!item.selected){
      this.selectedAmt.push(item);
    }else{
      let find = this.selectedAmt.findIndex((value)=>value.id==item.id);
      if(find != -1){
        this.selectedAmt.splice(find,1);
      }
    }
    this.totalAmt=0;
    this.selectedAmt.forEach(value=>{
      this.totalAmt += value.amt;
    });
  
    this.paymentOrders.forEach(element => {
      if(element.id==item.id){
        element.selected = !element.selected;
      }
    });

    this.paymentOrderBtnDisable = item.selected;
    this.paymentOrderBtn();
  }

  paymentOrderBtnDisable = true;
  paymentOrderBtn(){
    let num = 0;
    this.paymentOrders.forEach((element,index) => {
      if(element.selected){
        num += 1;
      }
      // this.paymentOrderBtnDisable = element.selected;
    });

    if(num > 0){
      this.paymentOrderBtnDisable = false;
    }else{
      this.paymentOrderBtnDisable = true;
    }
  }

  toPaymentPassword(){
    // this.openPaymentPassword();
    let url = '/scm/app/checkPaymentPwdExistence.do';
 
    let requestData = {
      appUserId: this.appUserId,//this.authTokenService.getAppUserId(),
    };
    this.http.post(url, requestData).subscribe((response:any) => {
  
      let body = response.responseBody;
      if (body.firstPwd) {
          this.modalController.create({
            component: CommonNoPaymentPwdPage,
            cssClass: 'no_pwd_custom_modal',
            componentProps: {
              "url":location.pathname
            }
          }).then(resolve=>{resolve.present()});
      }else{
        this.openPaymentPassword();
      }
    });
  }
  
  async openPaymentPassword(){
    const modal = await this.modalController.create({
      component: CommonPaymentPasswordPage,
      cssClass: 'custom_modal',
      componentProps: {
       "payment":true,
       "url":location.pathname
      }
    });
    await modal.present();
  }


}
